import React, { Component } from 'react';
import { hotsearch,good_search } from "../api/search";
import { SearchBar, NavBar } from 'antd-mobile'
import { DeleteOutline } from 'antd-mobile-icons'
import '../styles/search.scss'
class Search extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [],
            text: '',
            
            
        }
    }
    handleClick(e) {
      
       this.setState({ text: e})
       console.log(e)
    }
    handle(e) {
        this.setState({ text: e.target.innerText })
    }
    // handleChange(e){
    // this.setState({
    //     [e.target.name] : e.target.type == 'checkbox' ? e.target.checked : e.target.value
    //   })
    // }
    back() {
        this.props.history.goBack()
    }
    jump() {
        this.props.history.push({pathname:'/goodDetail',state:{searchkey:this.state.text}})
    }
  async  componentDidMount() {
      var res = await hotsearch()  
      console.log(res.data.list)
      this.setState({list:res.data.list})
      var data = await good_search({ searchkey: '' })
      console.log(data)
    }
    render() {
        return (
            <div className='search'>
                <NavBar onBack={() => { this.back() }}>搜索商品</NavBar>
               
                <SearchBar placeholder='请输入内容' showCancelButton   value={this.state.text} onChange={(e)=>{this.handleClick(e)}} onSearch={()=>{this.jump()}} />
       
                <div className='recentSearch'>
                    <p>最近搜索</p> 
                    <DeleteOutline />
                    <ul>
                    
                    </ul>
                </div> 
                <div className='hotsearch'>
                    <p>热门搜索</p>
                <ul>
                    {this.state.list.map((item, index) => {
                        return (
                            <li key={index} onClick={(e)=>{this.handle(e)}}>{ item}</li>
                    )
                })}
                    </ul>
                    </div>
            </div>
        );
    }
}

export default Search;